<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">

    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    msg:"初始值"
                }
            },
            //这个template会整个替换掉el对应的标签
            template:`
            <div id="pdd">
                我在template属性中定义的页面
                <input type="text" v-model="msg">
            </div>
            `,
            beforeCreate() {
                console.log("beforeCreate钩子函数：");
                console.log("在创建data之前执行的函数,$data还未实例化完成：",this.$data)
            },
            //这个钩子函数可以用于data数据初始化！
            created() {
                console.log("created钩子函数：");
                this.msg="created修改data中的初始值！"
                console.log("这个钩子函数，实例化data执行的函数,$data实例化完成：",this.$data)
                console.log("这个钩子函数,$el指向的是渲染成功后的dom元素，此时没有$el：",this.$el)
            },
            //数据还未渲染到页面中，还没有挂载到页面上dom中没有
            beforeMount() {
                console.log("beforeMount钩子函数：");
                console.log("这个钩子函数,$el已经存在，但是模板template元素还未替换到dom中",this.$el)
            },
            //挂载完成
            mounted() {
                console.log("mounted钩子函数：");
                console.log("这个钩子函数中，模板template已经挂载到目标dom中",this.$el)
            },
            //data中的数据发生变化，但是页面中还未发生变化！
            beforeUpdate() {
                console.log("beforeUpdate钩子函数：");
                console.log("获取data中的元素",this.$data.msg);
           
            },
            //页面数据更新完成
            updated() {
                console.log("updated钩子函数：");
                console.log("获取data中的元素",this.$data.msg);
                
            },
            //销毁前 控制台打 vm.$destroy()
            beforeDestroy() {
                console.log("beforeDestroy钩子函数：vm销毁前");
            },
             //销毁完成
             destroyed() {
                 debugger
                console.log("destroyed钩子函数：vm销毁完成");
            },
        });
    </script>
</body>

</html>